<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>v-for !!! Key</title>
  <script src="../../lib/vue.js"></script>
</head>

<body>
  <div id="app">
    <label> ID: <input v-model="cur.id" type="text" /></label>
    <label> Name: <input v-model="cur.name" type="text" /></label>
    <input type="button" value="添加" @click="add()" />
    <p v-for="item in store" :key="item.id">
      <input type="checkbox" /> {{ item.id }}:{{ item.name }}
    </p>
  </div>
</body>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      cur: { id: null, name: null },
      store: [
        { id: 1, name: "李斯" },
        { id: 2, name: "嬴政" },
        { id: 3, name: "赵高" },
        { id: 4, name: "韩非" },
        { id: 5, name: "荀子" },
      ],
    },
    methods: {
      add()
      {
        // 数组方法：unshift 从头部添加
        this.store.unshift({ id: this.cur.id, name: this.cur.name });
        // 如果没有设置合规的key值
        // 选中五号位的荀子，然后按添加，会发现，原先的五号位选中变成了4号位选中

        // console.log({ id: this.cur.id, name: this.cur.name });
        // 数组方法：push 从尾部添加
        // this.store.push({ id: this.cur.id, name: this.cur.name });
      },
    },
  });
</script>

</html>